<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据展示</title>
<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="data/result.js"></script>
</head>
<body>
	<h1 style="width: 100%;text-align: center;">一、职业内数据分析</h1>
	<hr>
	<div id="container1" style="width: 100%;text-align: center;"></div>
	
	<h1 style="width: 100%;text-align: center;">二、职业间数据分析</h1>
	<hr>
	<div id="container2" style="width: 100%;text-align: center;"></div>
	
	<h1 style="width: 100%;text-align: center;">三、自如数据分析</h1>
	<hr>
	<div id="container3" style="width: 100%;text-align: center;"></div>
	
	<script type="text/javascript">
		//一、职业内统计，每个职业一个表，横向为城市，跨度为年限
		$(function () {
			var jobs = ["java", "大数据", "cobol"];
			
			for (var i = 0; i < jobs.length; i++) {
				//var categories = ['1年以下', '1-3年',  '2-10年', '1年以上', '1年以下', '2年以上', '3-5年', '3年以上', '4年以上', '5-10年', '5年以上', '8年以上', '10年以上'];//年限
				var job = jobs[i];
				var categories = ['1年以下', '1-3年',  '3-5年', '5-10年', '10年以上'];//年限
				var series = [{
		            name: '北京',  data: [0, 0, 0, 0, 0]
		        }, {
		            name: '上海',  data: [0, 0, 0, 0, 0]
		        }, {
		            name: '深圳', data: [0, 0, 0, 0, 0]
		        }, {
		            name: '广州', data: [0, 0, 0, 0, 0]
		        }, {
		            name: '天津',  data: [0, 0, 0, 0, 0]
		        }, {
		            name: '杭州',  data: [0, 0, 0, 0, 0]
		        }, {
		            name: '成都', data: [0, 0, 0, 0, 0]
		        }];
				
				for (var j = 0; j < zhilianData.length; j++) {
					var time = zhilianData[j].time;
					var price = zhilianData[j].price;
					var city = zhilianData[j].city;
					var jobName = zhilianData[j].job;
					
					for (var x = 0; x < series.length; x++) {
						var name = series[x].name;
						if(job == jobName && name == city) {
							var dataIndex = 0;
							if(time == '1年以下') {
								dataIndex = 0;
							} else if(time == '1-3年' || time == '2-10年' || time == '1年以上' || time == '2年以上') {
								dataIndex = 1;
							} else if(time == '3-5年' || time == '3年以上' || time == '3年以上' || time == '4年以上') {
								dataIndex = 2;
							} else if(time == '5-10年' || time == '8年以上') {
								dataIndex = 3;
							} else if(time == '10年以上') {
								dataIndex = 4;
							} else {
								continue;
							}
							series[x].data[dataIndex] = price;
							break;
						}
					}
				}
				var title = job + "热门城市各个工作年限平均薪资";
				chart("container1", job, title, categories, series);
				console.log(JSON.stringify(series));
			}
		});
	</script>
	
	<script type="text/javascript">
		//二、职业间统计，每个职业一个表，横向为城市，跨度为年限
		$(function () {
			var citys = ["北京", "上海", "深圳", "广州", "天津", "杭州", "成都"];
			
			for (var i = 0; i < citys.length; i++) {
				//var categories = ['1年以下', '1-3年',  '2-10年', '1年以上', '1年以下', '2年以上', '3-5年', '3年以上', '4年以上', '5-10年', '5年以上', '8年以上', '10年以上'];//年限
				var city = citys[i];
				var categories = ['1年以下', '1-3年',  '3-5年', '5-10年', '10年以上'];//年限
				var series = [{
		            name: 'java',  data: [0, 0, 0, 0, 0]
		        }, {
		            name: '大数据',  data: [0, 0, 0, 0, 0]
		        }, {
		            name: 'cobol', data: [0, 0, 0, 0, 0]
		        }];
				
				for (var j = 0; j < zhilianData.length; j++) {
					var time = zhilianData[j].time;
					var price = zhilianData[j].price;
					var cityName = zhilianData[j].city;
					var job = zhilianData[j].job;
					
					for (var x = 0; x < series.length; x++) {
						var name = series[x].name;
						if(city == cityName && name == job) {
							var dataIndex = 0;
							if(time == '1年以下') {
								dataIndex = 0;
							} else if(time == '1-3年' || time == '2-10年' || time == '1年以上' || time == '2年以上') {
								dataIndex = 1;
							} else if(time == '3-5年' || time == '3年以上' || time == '3年以上' || time == '4年以上') {
								dataIndex = 2;
							} else if(time == '5-10年' || time == '8年以上') {
								dataIndex = 3;
							} else if(time == '10年以上') {
								dataIndex = 4;
							} else {
								continue;
							}
							series[x].data[dataIndex] = price;
							break;
						}
					}
				}
				var title = city + "各个职业的平均薪资";
				chart("container2", city, title, categories, series);
				//console.log(JSON.stringify(series));
			}
		});
	</script>
	<script type="text/javascript">
		//三、自如数据分析，每个出租类型一个表，横向为房型，对比不同的城市
		$(function () {
			var types = ["合", "整", "直"];
			var citys = ["北京", "上海", "深圳", "广州", "天津", "杭州", "成都"];
			
			for (var i = 0; i < types.length; i++) {
				var type = types[i];
				var series = [];
				var categories = [];//横向为房型
				// 抽取出数据
				var typeData = [];
				for (var j = 0; j < ziroomData.length; j++) {
					if(ziroomData[j].type == type) {
						typeData.push(ziroomData[j]);
						var roomType = ziroomData[j].roomType;// 一室一厅
						categories.push(roomType);//生产X轴
					}
				}
				
				for (var j = 0; j < citys.length; j++) {
					var data = {name : citys[j], data : [] };
					for (var x = 0; x < typeData.length; x++) {
						var price = typeData[x][citys[j]];
						if(price == 0)
							price = null
						data.data.push(price);
					}
					series.push(data);
				}
				var title =  "热门城市——"+type+"租平均租金";
				chart("container3", type, title, categories, series);
				//console.log(JSON.stringify(series));
			}
		});
	</script>
	<script type="text/javascript">
		//工具类
		function chart(parentId, id, title, categories, series) {
			$("#" + parentId).append("<div id='"+id+"' style='margin: 100px;'></div>");
			$('#' + id).highcharts({
		        chart: {
		            type: 'column'
		        },
		        title: {
		            text: title
		        },
		        subtitle: {
		            text: ' '
		        },
		        xAxis: {
		            categories: categories,
		            crosshair: true
		        },
		        yAxis: {
		            min: 0,
		            title: {
		                text: '人民币：￥'
		            }
		        },
		        credits:{
		            enabled: false // 禁用版权信息
		       	},
		        tooltip: {
		            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		            '<td style="padding:0"><b>{point.y} ￥</b></td></tr>',
		            footerFormat: '</table>',
		            shared: true,
		            useHTML: true
		        },
		        plotOptions: {
		            column: {
		                pointPadding: 0.2,
		                borderWidth: 0
		            }
		        },
		        series : series
		    });
		}
		//去重复
		function unqine(arr) {
			var obj = new Object();
			for (var i = 0; i < arr.length; i++) {
				obj[arr[i]] = arr[i];
			}
			var ret = "";
			for ( var p in obj) {
				if (typeof p == 'string' && p.substring(p.length - 1) == "_") {
					ret += ",";
					ret += p.substring(0, p.length - 1);
				}
			}
			if (ret == "") {
				return ret.split(",");
			} else {
				return ret.substring(1).split(",");
			}
			return ret;
		}
	</script>
	<script type="text/javascript" src="script/highcharts.js"></script>
</body>
</html>